{% extends "背景板.html" %}
{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}
{% block main %}
<style>
    /* 样式表 */
    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    .product-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }
    .product-row h4 {
      margin-top: 0;
      margin-bottom: 5px;
    }
    .product-row p {
      margin-top: 0;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .product-row .price {
      font-weight: bold;
      font-size: 16px;
    }
    .qr-code {
      display: flex;
      align-items: center;
    }
    .qr-code img {
      max-width: 100%;
      height: auto;
    }
    .buttons {
      display: flex;
    }
    .buttons button {
      margin-left: 10px;
      padding: 5px 10px;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    .manage-button {
      background-color: #00bfff;
    }
    .delete-button {
      background-color: #ffb6c1;
    }
    /* 分界线 */
    .separator {
      border-top: 1px solid #ddd;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    /* 模态框样式 */
    .modal {
      display: none; /* 默认不显示 */
      position: fixed; /* 覆盖整个视口 */
      z-index: 1; /* 放在最上面 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
    }
    .modal-content {
      background-color: #fefefe; /* 白色背景 */
      margin: 15% auto; /* 居中 */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px; /* 最大宽度 */
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover, .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
    /* 输入框样式 */
    input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }
    input[type=submit] {
      background-color: #00bfff;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    input[type=submit]:hover {
      background-color: #0080ff;
    }

      .product-info {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .search-box {
        margin-bottom: 10px;
    }
    .search-box input {
        width: 300px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .search-box button {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .save-button {
      background-color: #1E90FF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .cancel-button {
      background-color: #FFB6C1;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
</style>

<div class="product-info">
    <h1>采购订单商品信息</h1>
    <!-- 新增商品 -->
    <button onclick="openModal('add-modal')">新增商品</button>
    <!-- 添加商品模态框 -->
    <div id="add-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('add-modal')">&times;</span>
            <h2>新增商品</h2>
            <form method="POST"
                  action="{{ url_for('purchase_orders.add_product',purchase_order_id=purchase_order.id) }}">
                <label for="product_name">商品名称</label>
                <input type="text" id="product_name" name="product_name" required>
                <label for="purchase_price">采购价格</label>
                <input type="text" id="purchase_price" name="purchase_price" required>
                <label for="purchase_quantity">采购数量</label>
                <input type="text" id="purchase_quantity" name="purchase_quantity" required>
                <label for="supplier">供应商</label>
                <input type="text" id="supplier" name="supplier" required>
                <input type="submit" value="保存">
            </form>
        </div>
    </div>
</div>
<!-- 商品列表 -->
<div class="table-container" style="height: 500px; overflow: auto;">
    <table>
        <tr>
            <th>商品名称</th>
            <th>采购单价</th>
            <th>采购数量</th>
            <th>供应商</th>
            <th>总价</th>
            <th>操作</th>

        </tr>
        {% for product in products %}
        <tr>
            <td>{{ product.name }}</td>
            <td>{{ product.purchase_price }}</td>
            <td>{{ product.purchase_quantity }}</td>
            <td>{{ product.supplier }}</td>
            <td>{{ product.total_amount }}</td>
            <td>
                <div class="buttons">
                    <button class="manage-button" onclick="openModal('manage-modal-{{ product.id }}')">管理</button>
                    <button class="delete-button" onclick="openModal('delete-modal-{{ product.id }}')">删除</button>
                </div>
            </td>
        </tr>

        <!-- 管理模态框 -->
        <div id="manage-modal-{{ product.id }}" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('manage-modal-{{ product.id }}')">&times;</span>
                <h2>管理商品</h2>
                <form method="POST" action="{{ url_for('purchase_orders.manage_product',productpurchaseorder_id=product.id) }}">
                    <label for="new_product_name">商品名称</label>
                    <input type="text" id="new_product_name" name="new_product_name" value="{{ product.name }}"
                           required>
                    <label for="new_price">采购价格</label>
                    <input type="text" id="new_price" name="new_price" value="{{ product.purchase_price }}" required>
                    <label for="new_quantity">采购数量</label>
                    <input type="text" id="new_quantity" name="new_quantity"
                           value="{{ product.purchase_quantity }}" required>
                    <label for="new_supplier">供应商</label>
                    <input type="text" id="new_supplier" name="new_supplier" value="{{ product.supplier }}" required>
                    <input type="submit" value="保存">
                </form>
            </div>
        </div>
        <!-- 删除模态框 -->
        <div id="delete-modal-{{ product.id }}" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('delete-modal-{{ product.id }}')">&times;</span>
                <h2>确认删除商品</h2>
                <p>你确定要删除 "{{ product.name }}" 吗？</p>
                <form method="POST">
                    <div class="buttons">
                        <input type="submit" value="确认删除">
                        <button type="button" onclick="closeModal('delete-modal-{{ product.id }}')">取消</button>
                    </div>
                </form>
            </div>
        </div>
        {% endfor %}
    </table>
    <button class="save-button" onclick="savePurchaseOrder()">保存</button>
    <button class="cancel-button" onclick="cancelPurchaseOrder()">取消</button>
</div>
  <script>
      // JavaScript代码
    function openModal(modalId) {
      document.getElementById(modalId).style.display = "block";
    }

    function closeModal(modalId) {
      document.getElementById(modalId).style.display = "none";
    }
    function savePurchaseOrder() {
      window.location.href = "/purchase_orders/save_purchase_order/{{purchase_order.id}}";
    }

    function cancelPurchaseOrder() {
      window.location.href = "/purchase_orders/cancel_purchase_order/{{purchase_order.id}}";
    }
  </script>
{% endblock %}